<template>
  <div class="home">
    <m-form
      label-width="120px"
      :options="options"
      @change="handleChange"
      ref="mFormRef"
    >
      <template #test="scoped">
        <el-input
          @input="changeInput(scoped)"
          v-model="test1"
        ></el-input>
      </template>
      <template #action>
        <el-button
          type="primary"
          @click="handleSubmitForm"
        >提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </template>
    </m-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import mForm from "../components/form";
import { FormOptions } from "../components/form/types/types";
const model = ref<any>({});
const test1 = ref<any>("");
const mFormRef = ref<InstanceType<typeof mForm>>();
const options: Array<FormOptions> = [
  {
    type: "input",
    value: "",
    prop: "test",
    label: "测试",
    slotName: "test",
    validator(rule: any, value: any, callback: any) {
      if (value === "") {
        callback(new Error("请输入测试文本"));
      } else {
        // if (test1.value !== '') {
        //   this.$refs.ruleForm.validateField('checkPass');
        // }
        callback();
      }
    },
    rules: [
      {
        required: true,
        message: "请输入测试",
        trigger: "blur",
      },
      {
        min: 3,
        max: 6,
        message: "请输测试3-6个字符",
        trigger: "blur",
      },
    ],
  },
  {
    type: "input",
    value: "",
    prop: "username",
    label: "用户名",
    attrs: {
      clearable: true,
    },
    placeholder: "请输入用户名",
    rules: [
      {
        required: true,
        message: "请输入用户名",
        trigger: "blur",
      },
      {
        min: 3,
        max: 6,
        message: "请输入3-6个字符",
        trigger: "blur",
      },
    ],
  },
  {
    type: "input",
    value: "",
    prop: "password",
    label: "密码",
    placeholder: "请输入密码",
    attrs: {
      clearable: true,
      showPassword: true,
    },
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
      {
        min: 6,
        max: 15,
        message: "请输入6-15个字符",
        trigger: "blur",
      },
    ],
  },
  {
    type: "select",
    value: "",
    label: "职位",
    prop: "rule",
    placeholder: "请选择职位",
    attrs: {
      style: {
        width: "100%",
      },
    },
    rules: [
      {
        required: true,
        message: "职位不能为空",
        trigger: "blur",
      },
    ],
    children: [
      {
        type: "option",
        value: "1",
        label: "经理",
      },
      {
        type: "option",
        value: "2",
        label: "主管",
      },
    ],
  },
  {
    type: "checkbox-group",
    value: [],
    label: "爱好",
    prop: "hobby",
    rules: [
      {
        required: true,
        message: "爱好不能为空",
        trigger: "blur",
      },
    ],
    children: [
      {
        type: "checkbox",
        value: "1",
        label: "游泳",
      },
      {
        type: "checkbox",
        value: "2",
        label: "主管",
      },
    ],
  },
  {
    type: "radio-group",
    value: "",
    label: "性别",
    prop: "six",
    rules: [
      {
        required: true,
        message: "性别不能为空",
        trigger: "blur",
      },
    ],
    children: [
      {
        type: "radio",
        value: "1",
        label: "男",
      },
      {
        type: "radio",
        value: "2",
        label: "女",
      },
    ],
  },
  {
    type: "upload",
    label: "上传",
    prop: "pic",
    rules: [
      {
        required: true,
        message: "上传图片不能为空",
        trigger: "blur",
      },
    ],
    uploadAttrs: {
      action: "http://127.0.0.1:9000/upload",
      multiple: true,
      name: "pic",
    },
    uploadMethods: {
      onChange(file: any, fileList: any) {
        console.log("onChange");
      },
      onBeforeUpload(file: any) {
        console.log("onBeforeUpload");
        return true;
      },
      onSuccess(response: any, file: any, fileList: any) {
        model.value.pic = response.data.url;
      },
    },
  },
  {
    type: "editor",
    value: "",
    label: "描述",
    prop: "desc",
    placeholder: "请输入描述",
    rules: [
      {
        required: true,
        message: "请输入描述",
        trigger: "blur",
      },
    ],
  },
];

const handleChange = (value: any) => {
  model.value = value;
};

const handleSubmitForm = async () => {
  try {
    const res = await mFormRef.value?.submitForm();
    if (res) {
      console.log("success");
    } else {
      console.log("还有必填项没有填");
    }
  } catch (error) {
    console.log(error, "还有必填项没有填");
  }
};
const resetForm = () => {
  mFormRef.value?.resetFields();
};
const changeInput = (scope: any) => {
  scope.model[scope.item.prop!] = test1.value;
};
</script>

<style>
</style>